<template>
  <div class="sub-box" v-for="subItem in subComments.children" :key="subItem">
    <div class="sub-comment-user">
      <div class="sub-comment-user-info">
        <el-avatar
          :src="
            subItem.user.avatar
              ? subItem.user.avatar
              : randomArrayIndex(store.state.defaultErrorImageUrl)
          "
        >
          <template #default>
            <div class="image-slot">
              <el-image
                :src="randomArrayIndex(store.state.defaultErrorImageUrl)"
                fit="cover"
              ></el-image>
            </div>
          </template>
        </el-avatar>
        <div class="p-user">
          <!-- isauthor-->
          <span class="reply-user">
            <!--<span class="bb-comment">管理员</span>-->
            <span>{{ subItem.user.name }} </span>
            <span class="reply-label">回复 @</span>
          </span>
          <span>{{ subComments.user.name }}</span>
          <img
            src="https://www.pandimension.site/wp-content/themes/Sakura/killua/images/level/level_6.svg"
            style="height: 1.5em; max-height: 1.5em; display: inline-block"
          />
        </div>
        <div class="info user-info">
          <span>发布于 {{ timeDifference(subItem.createTime) }}</span>
          <span class="useragent-info"
            >(<i
              class="fa faa-wrench animated faa-slow"
              :class="
                subItem.clientServer
                  ? iconBrowserChoice(subItem.clientServer)
                  : 'fa-internet-explorer'
              "
              aria-hidden="true"
            ></i>
            &nbsp;{{ subItem.clientServer }}&nbsp;&nbsp;
            <i
              class="fa faa-tada animated faa-slow"
              :class="
                subItem.clientEquipment
                  ? iconDeviceChoice(subItem.clientEquipment)
                  : 'fa-windows'
              "
              aria-hidden="true"
            ></i
            >&nbsp;{{ subItem.clientEquipment }} )</span
          >
          <span>&nbsp;来自 : &nbsp;{{ subItem.address }}&nbsp;</span>
        </div>
      </div>
    </div>
    <!-- 评论内容-->
    <div class="user-sub-context">
      <div class="comment-reply-link" @click="subReply(subItem)">回复</div>
      <div class="context">
        <i class="fa fa-mail-forward reply-icon" aria-hidden="true"></i>
        <MdEditor
          :mdProps="{
            context: subItem.context,
            previewOnly: true
          }"
        ></MdEditor>
      </div>
      <transition
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOutDown"
      >
        <div
          class="pid-comment-box"
          v-show="
            subItem.isShowPidCommentForm
              ? subItem.isShowPidCommentForm
              : subItem.isShowPidCommentForm
          "
        >
          <el-form ref="formRef" :model="commentsForm">
            <div class="comment-textarea">
              <el-form-item class="pid-comment-reply">
                <el-input
                  class="textarea"
                  v-model="commentsForm.comment"
                  clearable
                  :autosize="{
                    minRows: 3,
                    maxRows: 5
                  }"
                  type="textarea"
                  :placeholder="`回复@${commentsForm.name}`"
                >
                </el-input>
              </el-form-item>
              <label class="input-label">回复区 ...</label>
              <CommentInput
                @PidReply="subReply(subItem)"
                :commentsData="{ commentsForm, subItem }"
              ></CommentInput>
            </div>
          </el-form>
        </div>
      </transition>
    </div>
    <template v-if="subItem.children">
      <SubComments :subComments="subItem"></SubComments>
    </template>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { defineProps, onMounted, reactive } from 'vue'
  import { timeDifference } from '@/utils/time.js'

  import { randomArrayIndex } from '@/utils/randomArrayElemt'
  import MdEditor from '@/components/markdown/MdEditor'
  import CommentInput from '@/views/blog/components/CommentInput'
  import { iconBrowserChoice, iconDeviceChoice } from '@/utils/webutils'
  const store = new useStore()

  defineProps({
    subComments: {
      type: Object
    },
    commentsData: {
      type: Object
    }
  })

  const commentsForm = reactive({
    id: '',
    comment: ''
  })

  const subReply = (item) => {
    store.commit('IS_SHOW_ARTICLE_COMMENT', item.isShowPidCommentForm)
    item.isShowPidCommentForm = !item.isShowPidCommentForm
    commentsForm.name = item.user.name
  }

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .pid-comment-box {
    --animate-duration: 500ms;
  }

  .comment-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      position: relative;
      right: 15px;
      bottom: 3px;
      color: #3cb45e;
      border-radius: 40%;
    }
  }
  .user-comment-Info {
    display: flex;
    justify-content: space-around;
  }
</style>
